<script setup>
import { NButton } from 'naive-ui'
import { inject, onMounted } from 'vue'
import { CrosshairsTool } from '@cornerstonejs/tools'
import { IMG_OP_NAME, IMG_USER_OP_NAME, OP_TOOLS_MAP } from '@/types/viewSetting'

const props = defineProps(['active', 'opBtns'])
const toolGroup = inject('toolGroup')
const viewportIds = inject('viewportIds', [])

const emit = defineEmits(['setActive'])
const handleClick = item => {
  emit('setActive', item)
}


function getReferenceLineColor(viewportId) {
  const colorsArr = ['rgb(200, 0, 0)', 'rgb(200, 200, 0)', 'rgb(0, 200, 0)']
  const index = viewportIds.indexOf(viewportId)
  if (index !== -1) {
    return colorsArr[index]
  }
}

function getReferenceLineControllable(viewportId) {
  const index = viewportIds.indexOf(viewportId)
  return index !== -1
}

function getReferenceLineDraggableRotatable(viewportId) {
  const index = viewportIds.indexOf(viewportId)
  return index !== -1
}

function getReferenceLineSlabThicknessControlsOn(viewportId) {
  const index = viewportIds.indexOf(viewportId)
  return index !== -1
}

onMounted(() => {
  const isMobile = window.matchMedia('(any-pointer:coarse)').matches
  const opTools = props.opBtns.filter(op => IMG_USER_OP_NAME[op])
  opTools.forEach((eachTool) => {
    if (eachTool === IMG_OP_NAME.CROSSHAIR) {
      toolGroup?.addTool(CrosshairsTool.toolName, {
        getReferenceLineColor,
        getReferenceLineControllable,
        getReferenceLineDraggableRotatable,
        getReferenceLineSlabThicknessControlsOn,
        mobile: {
          enabled: isMobile,
          opacity: 0.8,
          handleRadius: 9
        }
      })
    } else if (OP_TOOLS_MAP[eachTool]) {
      toolGroup?.addTool(OP_TOOLS_MAP[eachTool].tool.toolName)
    }
  })
})

</script>

<template>
  <div class="w-full h-full grid grid-cols-5">
    <n-button v-for="item in opBtns" :key="item"
              size="small"
              @click="handleClick(item)"
              :class="props.active === item ? 'bg-red-300': ''">
      {{ item }}
    </n-button>
  </div>
</template>

<style scoped>

</style>
